<template>
	<view class="index">
		<image class="bg" src="@/static/index/bg.png" alt=""></image>
		<view class="logo">
			<image src="@/static/index/logo.png" alt=""></image>
			<text>全城维修·专业快捷</text>
		</view>
		<view class="address" @click="onJump('/subpackage/choosAddress/choosAddress')">
			<text>{{city}}</text>
			<image src="@/static/index/arrow_down.png" alt="" srcset=""></image>
		</view>
		<view class="map">
			<image class="map-icon" src="@/static/index/map_icon.png" mode=""></image>
			<map class="mapBox" :longitude="longitude" :latitude="latitude" :show-location="true" name=""></map>
			<view class="map-address">
				<view class="address1">
					<image src="@/static/index/location_icon1.png" alt=""></image>
					<text>{{area}}</text>
				</view>
				
				<view class="address2">
						<dwu-chooseAddressOne :disabled="disabled" :defaultVal="address" 
							@onconfirm="confirmAddress" inputAlign="left">
						</dwu-chooseAddressOne>
				</view>
				
			<!-- 	<view class="address2" @click="confirmAddress">
					<image src="@/static/index/location_icon2.png" alt=""></image>
					<text>{{address}}</text>
				</view> -->
				<view class="place" @click="onJump('/subpackage/order/add')">
					<text>去下单</text>
					<image src="@/static/index/order_icon.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"
				indicator-color="#D8D8D8" indicator-active-color="#B0DD67">
				<swiper-item v-for="(item,index) in bannerList" :key="index" @click="onJump(item.url)">
					<image :src="item.image | imageUrl" mode=""></image>
				</swiper-item>
				<!-- <swiper-item>
					<image src="@/static/index/banner.png" mode=""></image>
				</swiper-item>
				<swiper-item>
					<image src="@/static/index/banner.png" mode=""></image>
				</swiper-item> -->
			</swiper>
		</view>
		<view class="order">
			<view class="title">
				<view>当前订单</view>
				<!-- <view class="">
					<view class="">
						<text>服务中</text>
						<image src="@/static/index/arrow_down.png" mode=""></image>
					</view>
					<view class="">
						<text>维修</text>
						<image src="@/static/index/arrow_down.png" mode=""></image>
					</view>
				</view> -->
			</view>
			<view class="order-list" v-if="orderList.length > 0">
				<view class="order-item" v-for="(item,index) in orderList" :key="index"
					@click="onJump('/subpackage/order/detail?id='+item.id)">
					<image v-if="item.is_status == 2" class="order-item-bg" src="@/static/index/order_item_bg2.png"
						mode="">
					</image>
					<image v-else class="order-item-bg" src="@/static/index/order_item_bg1.png" mode=""></image>
					<view class="order-title">
						<view class="order-left">
							<text>{{item.repair_name}}</text>
							<text class="order-type" v-if="item.is_status == 0">待接单</text>
							<text class="order-type" v-else-if="item.is_status == 1">待上门</text>
							<text class="order-type" v-else-if="item.is_status == 2">服务中</text>
							<text class="order-type" v-else-if="item.is_status == 3">待评价</text>
							<text class="order-type" v-else-if="item.is_status == 4">已完结</text>
							<text class="order-type" v-else-if="item.is_status == 5">取消订单</text>
							<text class="order-type" v-else>-</text>
						</view>
						<dwu-state :title="item.service_name"></dwu-state>
					</view>
					<view class="content">
						<view class="content-item">
							<text class="label">订单编号</text>
							<text class="value">{{item.order_sn}}</text>
						</view>
						<view class="content-item">
							<text class="label">设备名称</text>
							<text class="value">{{item.brand_name}}</text>
						</view>
						<view class="content-item">
							<text class="label">期望上门时间</text>
							<text class="value">{{item.call_time_text}}</text>
						</view>
					</view>
				</view>
			</view>
			<dwu-empty paddingTop="100rpx" image="/static/public/empty_icon2.png" imageW="252rpx" imageH="132rpx"
				tips="您当前还没有发单哦~" v-else></dwu-empty>
		</view>
		<dwu-modal ref="dwuModal"></dwu-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude: 0,
				latitude: 0,
				city: '',
				address: '',
				area: '',
				bannerList: [],
				page: 1,
				pageSize: 10,
				flag: false,
				orderList: []
			}
		},
		onShow() {
			this.page = 1
			this.flag = false
			this.userIndex()
		},
		onLoad() {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.longitude = res.longitude
					this.latitude = res.latitude
					this.amap.getAddressByLatLng(res.latitude, res.longitude).then(ress => {
						let addressComponent = ress.addressComponent
						let aois = ress.aois
						this.city = addressComponent.city
						this.address = ress.formatted_address
						this.area = aois[0].name
						let dwuLocationNow = {
							longitude: res.longitude,
							latitude: res.latitude,
							province: addressComponent.province,
							city: addressComponent.city,
							district: addressComponent.district,
							township: addressComponent.township,
							address: ress.formatted_address
						}
						uni.setStorageSync('dwu-location-now', dwuLocationNow)
						this.cityIfOn()
						this.userIndex()
					})
				},
				fail: (err) => {
					console.log(err);
				}
			})
			this.init()
			
		},
		onReachBottom() {
			if (this.flag) return
			this.page++
			this.flag = true
			this.userIndex(true)
		},
		methods: {
			init() {
				if (this.city) {
					this.cityIfOn()
				}
				this.getBanner()
			},
			confirmAddress(e){
				// this.address = e.address
				// this.longitude = e.latitude
				// this.latitude = e.longit
				// this.longitude = res.longitude
				// this.latitude = res.latitude
				console.log('测试e',e)
				
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						// console.log('测试res',res)
						// console.log('测试eee',e)
						this.longitude = e.longitude
						this.latitude = e.latitude
						this.amap.getAddressByLatLng(e.latitude, e.longitude).then(ress => {
							let addressComponent = ress.addressComponent
							let aois = ress.aois
							this.city = addressComponent.city
							this.address = ress.formatted_address
							this.area = aois[0].name
							let dwuLocationNow = {
								longitude: res.longitude,
								latitude: res.latitude,
								province: addressComponent.province,
								city: addressComponent.city,
								district: addressComponent.district,
								township: addressComponent.township,
								address: ress.formatted_address
							}
							uni.setStorageSync('dwu-location-now', dwuLocationNow)
							this.cityIfOn()
							this.userIndex()
						})
					},
					fail: (err) => {
						console.log(err);
					}
				})
				this.init()
				
				
				
				// this.amap.getAddressByLatLng(e.latitude, e.longitude).then(ress => {
				// 	let addressComponent = ress.addressComponent
				// 	let aois = ress.aois
				// 	this.city = addressComponent.city
				// 	this.address = ress.formatted_address
				// 	this.area = aois[0].name
				// 	let dwuLocationNow = {
				// 		longitude: res.longitude,
				// 		latitude: res.latitude,
				// 		province: addressComponent.province,
				// 		city: addressComponent.city,
				// 		district: addressComponent.district,
				// 		township: addressComponent.township,
				// 		address: ress.formatted_address
				// 	}
				// 	uni.setStorageSync('dwu-location-now', dwuLocationNow)
				// 	this.cityIfOn()
				// 	this.userIndex()
				// })
				// this.init()
				
				
				// this.amap.getAddressByLatLng(e.latitude, e.longitude).then(ress => {
					
				// 	let addressComponent = ress.addressComponent
				// 	let aois = ress.aois
				// 	this.address = ress.formatted_address
				// 	console.log(ress.aois)
				// 	this.area = aois[0].name
					
				// 	// this.area
				// 	// let aois = ress.aois
				// 	// this.selectVal = addressComponent.province + addressComponent.city + addressComponent.district
				// 	// this.form['city'] = addressComponent.city
				// })
			},
			cityIfOn() {
				this.request.http('/index/cityIfOn', 'post', {
					name: this.city
				}).then(res => {
					let data = res.data
					if (data.code == 1) {

					}
				}).catch(err => {
					this.$refs.dwuModal.open({
						content: '检测到您当前城市未开通服务，是否手动更换城市？',
						success: (res) => {
							uni.navigateTo({
								url: '/subpackage/choosAddress/choosAddress'
							})
						}
					})
				})
			},
			getBanner() {
				this.request.http('/index/getBanner', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.bannerList = data.data
					}
				})
			},
			userIndex(next) {
				if (!uni.getStorageSync('dwu_token')) {
					return
				}
				this.request.http('/order/userIndex', 'post', {
					page: this.page,
					limit: this.pageSize,
					lat: this.latitude,
					lng: this.longitude,
					is_status: '-1'
				}).then(res => {
					let data = res.data
					if (data.code == 1) {
						if (next) {
							if (data.data.data.length > 0) {
								this.orderList = this.orderList.concat(data.data.data)
								this.flag = false
							}
						} else {
							this.orderList = data.data.data
							this.flag = false
						}
					}
				})
			},
			onJump(url) {
				if (!uni.getStorageSync('dwu_token')) {
					this.$refs.dwuModal.open({
						content: '暂未登录，登录后才可下单！',
						submitText: '去登录',
						success: (res) => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					return
				}
				if (!url) return
				if (url == '/subpackage/order/add') {
					const value = uni.getStorageSync('dwu-location-now');
					console.log('测试',value)
					url = url+'?address='+ this.address + '&longitude='+this.longitude+'&latitude='+this.latitude+'&cityde='+value.city
				}
				console.log('url',this.addressde)
				uni.navigateTo({
					url
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.index {
		background: transparent;
		padding-bottom: 30rpx;

		.bg {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.logo {
			margin-top: 96rpx;
			padding-left: 48rpx;
			display: flex;
			align-items: center;

			image {
				width: 190rpx;
				height: 42rpx;
				margin-right: 12rpx;
			}

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #2E2E2E;
				line-height: 33rpx;
			}
		}

		&>.address {
			margin-top: 16rpx;
			padding-left: 48rpx;
			display: flex;
			align-items: center;

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 23rpx;
				color: #5B5B5B;
			}

			image {
				margin-left: 4rpx;
				width: 12rpx;
				height: 10rpx;
			}
		}

		.map {
			position: relative;
			margin-top: 18rpx;
			padding: 0 22rpx;

			.map-icon {
				position: absolute;
				right: 52rpx;
				top: -184rpx;
				width: 248rpx;
				height: 346rpx;
			}

			.mapBox {
				width: 100%;
				height: 566rpx;
				border-radius: 18rpx;
				overflow: hidden;
			}

			.map-address {
				position: relative;
				z-index: 9;
				margin-top: -180rpx;
				background: #fff;
				border-radius: 32rpx;
				padding: 28rpx;

				.address1 {
					display: flex;
					align-items: center;
					padding: 0 26rpx;

					image {
						margin-right: 16rpx;
						width: 38rpx;
						height: 46rpx;
						flex-shrink: 0;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 31rpx;
						color: #474747;
					}
				}

				.address2 {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					border-radius: 40rpx;
					border: 4rpx solid #818181;
					padding: 0 40rpx;
					width: 650rpx;
					height: 82rpx;

					image {
						width: 30rpx;
						height: 32rpx;
						margin-right: 23rpx;
						flex-shrink: 0;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						// font-weight: 400;
						font-size: 23rpx;
						color: #898989;
					}
				}

				.place {
					margin-top: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 650rpx;
					height: 82rpx;
					background-color: #3D3D3D;
					border-radius: 40rpx;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 31rpx;
						color: #B0DD67;
					}

					image {
						margin-left: 18rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		.banner {
			padding: 0 22rpx;

			.swiper {
				height: 198rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.order {
			// padding: 22rpx;

			.title {
				padding-left: 22px;
				margin: 17rpx 0;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 31rpx;
				color: #474747;
			}

			.order-list {
				.order-item {
					position: relative;
					// margin-bottom: 20rpx;
					padding: 44rpx;
					// background-color: #fff;
					border-radius: 18rpx;

					.order-item-bg {
						position: absolute;
						z-index: 1;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}

					.order-title {
						position: relative;
						z-index: 10;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.order-left {
							text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								font-size: 27rpx;
								color: #474747;
							}

							.order-type {
								margin-left: 25rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 23rpx;
								color: #949494;
							}
						}

						// .order-state {
						// 	position: relative;
						// 	width: 72rpx;
						// 	height: 34rpx;
						// 	background: transparent;

						// 	image {
						// 		position: absolute;
						// 		width: 72rpx;
						// 		height: 34rpx;
						// 		top: 0;
						// 		left: 0;
						// 		z-index: 1;
						// 	}

						// 	text {
						// 		display: block;
						// 		position: relative;
						// 		z-index: 2;
						// 		font-family: PingFangSC, PingFang SC;
						// 		font-weight: 500;
						// 		font-size: 21rpx;
						// 		color: #333333;
						// 		text-align: center;
						// 		line-height: 34rpx;
						// 		text-align: center;
						// 	}
						// }
					}

					.content {
						position: relative;
						z-index: 10;
						margin-top: 28rpx;

						.content-item {
							margin-bottom: 18rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.label {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 23rpx;
								color: #666666;
							}

							.value {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 23rpx;
								color: #868686;
							}
						}
					}
				}
			}
		}

		.no-data {
			padding: 60rpx 0;
		}

	}
</style>